<template>
  <div class="app-container">
    <div class="filter-container" v-loading="loading">
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="角色id">
          <el-input size="mini" v-model="searchData.id" placeholder="角色id"></el-input>
        </el-form-item>
        <el-form-item label="角色名">
          <el-input size="mini" v-model="searchData.name" placeholder="角色名"></el-input>
        </el-form-item>
      </el-form>

      <el-row :gutter="20" style="padding-bottom: 20px">
        <el-col :span="2"><el-button type="primary" @click="onAdd" size="mini">新增</el-button></el-col>
        <el-col :span="2" :offset="18"><el-button type="primary" @click="onSearch" size="mini">查询</el-button></el-col>
      </el-row >
    <tree-table :data="treeTabledata" :evalFunc="func" :evalArgs="args" :expandAll="expandAll"  border>
      <el-table-column
        prop="id"
        label="id"
        width="auto"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="name"
        label="资源名称"
        width="auto"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="url"
        label="资源请求URL"
        width="auto"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="resourceType"
        label="资源类型"
        width="auto"
        fixed="left"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">菜单</span>
          <span v-if="scope.row.status==1">按钮</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="资源状态"
        width="auto"
        fixed="left"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">停用</span>
          <span v-if="scope.row.status==1">启用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="资源描述"
        fixed="left"
        width="auto">
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="left">
        <template slot-scope="scope">
          <!--<el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>-->
          <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        <el-button type="primary" size="mini" v-if="scope.row.id!=0">操作</el-button>
      </span>


            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button type="primary" @click="handleEdit(scope.row)" size="mini">修改</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="primary" @click="delResource(scope.row)" size="mini">删除</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </tree-table>
     <resourceAdd v-bind:formPage="formPage" >

     </resourceAdd>


  </div>
  </div>
</template>

<script>
  import treeTable from '@/components/TreeTable'
  import treeToArray from '@/components/TreeTable/customEval.js'
  import {resourceList,delResource} from "@/api/resource/resource";
  import  resourceAdd from './add'

  export default {
    name: "resourceManger",
    components: {treeTable,resourceAdd},
    data() {
      return {
        func: treeToArray,
        expandAll: true,
        treeTabledata:[],
        loading:true,
        searchData: {
          id: '',
          name: ''
        },
        cache:{
          id:null,
        },
        args: [null, null, 'timeLine'],
        formPage:{
          show:false,
          cascader_data:[],
          formData:{
            id: "",
            resourceType: "",
            seq: "",
            status: "",
            description: "",
            icon: "",
            name:"",
            pid: "0",
            pidArray:[],
            pids:"",
            url: "",
            componentName: "",
            componentPath: ""
          }
        }
      }
    },
    methods: {
      onAdd(){
        // console.log(this.cache.id)
        // this.$refs['resourceAddForm'].resetFields();
        // this.$refs['resourceAddForm'].clearValidate()
        if(this.cache.id!=null){
          this.formPage.formData={
            id: "",
            resourceType: "",
            seq: "",
            status: "",
            description: "",
            icon: "",
            name:"",
            pid: "0",
            pidArray:[],
            pids:"",
            url: "",
            componentName: "",
            componentPath: ""
          }
          this.cache.id=null;
        }
        ;
        this.formPage.show=true;
      },
      handleEdit(row){
        this.formPage.show=true;
        if(this.cache.id!=row.id||this.cache.id==null){
          for(var p in  this.formPage.formData){//遍历json对象的每个key/value对,p为key
            this.formPage.formData[p]=row[p]
          }
          this.formPage.formData.status+='';
          this.formPage.formData.resourceType+='';
          this.cache.id=row.id;
        }
        // console.log(this.formPage.formData)
      },
      handelDel(){



      },
      message(row) {
        this.$message.info(row.name)
      },
      resourceTree(data,parentId){
        let tree=null;
        data.forEach((item,index)=>{
          item.id+='';
          item.pid+='';
          if(item.pid==parentId){
            let children=this.resourceTree(data,item.id);
            item.children=children;
            if(item.pids){
              item.pids= item.pids.replace(/\[|]/g,'');
              item.pidArray=item.pids.split(',')
            }
            if(tree==null){
              tree=[];
            }
            tree.push(item);
          }
        })
        return tree;
      },
      onSearch(){
          this.loading=true;
          resourceList(this.searchData).then(response => {
          let r_list = response.data.data;
          // console.log(r_list)
            r_list = this.resourceTree(r_list,0)
            r_list=[{id:'0',pid:'0',name:'顶层',pids:'0',pidArray:[0],children:r_list}];
          this.treeTabledata=r_list;
          this.formPage.cascader_data=r_list
            setTimeout(() => {
              this.loading=false;
            }, 300);
        });
      },
      delResource(row){
         delResource({id:row.id}).then(response =>{
           this.$message({
             message: response.data.mesg,
             type: 'success',
             duration: 5 * 1000
           })
         })
      }
    },
    mounted() {
      this.onSearch();
    }
  }
</script>

<style scoped>

</style>
